import React, { useEffect, useState } from 'react'
import './cat.css'
import { CATALOG, CURRENT } from '../../axios'
import { Sidebar, Divider  } from 'react-vant';
export default function Category() {
  let [ data,setData ] = useState([])
  let [ num,setNum ] = useState(0)
  let [ currentCategory,setCurrentCategory ] = useState([])
  let [ subCategoryList,setSubCategoryList ] = useState([])
  useEffect(() => {
    CATALOG().then(res => {
      setData(res.data.data.categoryList)
      Getcurrent(res.data.data.categoryList[num].id)
    })
  },[])
  // console.log(data);
  const Getcurrent = (id) => {
    CURRENT(id).then(res => {
      // console.log(res);
      if(res.status == 200){
        setCurrentCategory(res.data.data.currentCategory)
        setSubCategoryList(res.data.data.currentCategory.subCategoryList)
      }
    })
  }
  console.log(currentCategory,subCategoryList,999);
  return (
    <div>
      {data.length > 0 && <Sidebar
      value={num}
      onChange={(v) => {
        Getcurrent(data[v].id)
        setNum(v)
      }}
      >
      {
        data.map(item => {
          return <Sidebar.Item title={item.name} key={item.id}>
            {subCategoryList.length > 0 && <div>
              <div className='cat-banner'>
                <img src={currentCategory.banner_url} alt="" />
                <div>{item.front_desc}</div>
              </div>
              <Divider style={{ color: '#3f45ff', borderColor: '#ccc', padding: '0 100px' }}>
                {currentCategory.name}
              </Divider>
              <ul className='cat-ul'>
                {
                  subCategoryList.map(item => {
                    return <li key={item.id}>
                      <img src={item.wap_banner_url} alt="" />
                      <p>{item.name}</p>
                    </li>
                  })
                }
              </ul>
            </div>}
          </Sidebar.Item>
        })
      }
      </Sidebar>}
    </div>
  )
}
